<script setup lang="ts">
import { message } from '@/components/XtxUI'
import { useCountDown } from '@/hooks'
import { useMemberStore } from '@/store'
import type { QQUserInfo } from '@/types'
import { reactive, toRefs } from 'vue'

interface Props {
  unionId: string
  userInfo: QQUserInfo
}
const props = defineProps<Props>()
const { unionId } = toRefs(props)

const form = reactive({
  // mobile: '13012345764',
  mobile: '15915876393',
  code: '123456'
})

const isMobile = (mobile: string) => {
  return /^1[3-9]\d{9}$/.test(mobile)
}
const memberStore = useMemberStore()
const { sentBindCode } = memberStore
const { countTime, start, pause } = useCountDown()
const sendCode = () => {
  if (!isMobile(form.mobile)) {
    return message({ type: 'warn', text: '手机号码验证不通过' })
  }
  // 倒计时结束才能再次发送验证码
  if (countTime.value === 0) {
    sentBindCode(form.mobile)
    // 初始化倒计时
    start(59)
    message({ type: 'success', text: '已发送验证码，请注意查收' })
  }
}

const { loginSocialBind } = memberStore
const handleLoginBind = () => {
  /*
    温馨提示：如果测试账号已被绑定的，手动调用一下解绑被占用的测试手机号
    http://pcapi-xiaotuxian-front-devtest.itheima.net/login/social/unbind?mobile=测试手机号
  */
  const data = {
    unionId: unionId.value,
    // mobile: form.mobile,
    // code: form.code
    ...form
  }
  loginSocialBind(data)
  // 销毁倒计时
  countTime.value = 0
  pause()
}
</script>

<template>
  <div class="xtx-form" v-if="userInfo">
    <div class="user-info">
      <img :src="userInfo.data.figureurl_qq" />
      <p>Hi，{{ userInfo.data.nickname }} 欢迎来小兔鲜，完成绑定后可以QQ账号一键登录哦~</p>
    </div>
    <div class="xtx-form-item">
      <div class="field">
        <i class="icon iconfont icon-phone"></i>
        <input class="input" type="text" v-model="form.mobile" placeholder="绑定的手机号" />
      </div>
      <div class="error"></div>
    </div>
    <div class="xtx-form-item">
      <div class="field">
        <i class="icon iconfont icon-code"></i>
        <input class="input" type="text" placeholder="短信验证码" v-model="form.code" />
        <span class="code" :class="{ disabled: countTime !== 0 }" @click="sendCode">{{
          countTime === 0 ? '发送验证码' : `${countTime}秒后重新获取`
        }}</span>
      </div>
      <div class="error"></div>
    </div>
    <a href="javascript:;" class="submit" @click="handleLoginBind">立即绑定</a>
    <p class="tips">
      仅用于个人项目使用，为保障您的个人信息安全请勿录入任何个人敏感信息！（如手机号、身份证号等）
    </p>
  </div>
</template>

<style lang="less" scoped>
.user-info {
  display: flex;
  align-items: center;
  margin: 0 auto;
  margin-bottom: 25px;
  padding: 0 10px;
  width: 320px;
  height: 70px;
  background: #f2f2f2;

  img {
    width: 50px;
    height: 50px;
    background: #f2f2f2;
  }

  p {
    padding-left: 10px;
  }
}

.code {
  position: absolute;
  right: 0;
  top: 0;
  padding-right: 10px;
  min-width: 80px;
  color: #999;
  line-height: 50px;

  &:hover {
    color: @xtxColor;
    cursor: pointer;
  }

  &.disabled {
    color: #999;
    cursor: not-allowed;
  }
}

.tips {
  margin: 10px auto 0;
  width: 320px;
  color: red;
}
</style>
